<script setup>
import { formatNumber } from '@/utils/is.js'

const props = defineProps({
  itemInfo: {
    type: Object,
    required: true,
  },
  titleOp: {
    type: Boolean,
    default: false,
  },
  showFooter: {
    type: Boolean,
    default: true,
  },
  summaryLineNum: {
    type: Number,
    default: 1,
  },
  showCommentCount: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['updateItem'])

// 去作者主页
function toAuthor(id, event) {
  event.preventDefault()
  event.stopPropagation()
  console.log('toAuthor', id)
}

// 点赞
function like(id, event) {
  event.preventDefault()
  event.stopPropagation()
  const item = props.itemInfo
  const newItem = {
    ...item,
    articleMetric: {
      ...item.articleMetric,
      likeCount: item.isLike
        ? item.articleMetric.likeCount - 1
        : item.articleMetric.likeCount + 1,
    },
    isLike: !item.isLike,
  }
  console.log('文章id', id, '新的点赞状态', newItem.isLike)
  emit('updateItem', newItem)
}

// 去标签主页
function toTag(id, event) {
  event.preventDefault()
  event.stopPropagation()
  console.log('toTag', id)
}
</script>

<template>
  <div class="flex border-rd-5 p-8 cursor-pointer-bg-hover">
    <!-- 左侧内容区 -->
    <div class="mr-15 flex-col flex-1 justify-between">
      <div class="">
        <!-- 标题 -->
        <div class="mb-5 flex items-center justify-start">
          <slot name="titlePre" />
          <h2
            class="line-clamp-1 font-size-18 fw-550"
            :class="{ 'op-text': titleOp }"
          >
            {{ itemInfo.title }}
          </h2>
        </div>
        <!-- 副标题 -->
        <p
          class="font-size-14 op-text"
          :class="[`line-clamp-${summaryLineNum || 1}`]"
          :style="{
            '-webkit-line-clamp': summaryLineNum ?? 1,
            'display': '-webkit-box',
            '-webkit-box-orient': 'vertical',
            'overflow': 'hidden',
          }"
        >
          {{ itemInfo.summary || itemInfo.title }}
        </p>
      </div>

      <slot v-if="$slots.footer" name="footer" />
      <template v-else>
        <!-- 互动信息 -->
        <!-- line-height-1 图标和数字高度对齐 -->
        <div v-if="showFooter" class="mt-10 flex justify-between font-size-14">
          <div class="flex items-center gap-4 op-text">
            <div>
              <slot v-if="$slots.author" name="author" />
              <span
                v-else
                class="touch-selected"
                @click="toAuthor(itemInfo.author.id, $event)"
              >
                {{ itemInfo.author.nickName }}
              </span>
              <el-divider direction="vertical" />
            </div>
            <div class="flex items-center gap-5">
              <div class="mr-10 f-c-c gap-2 hover:cursor-pointer">
                <i class="i-fe:eye" />
                <span class="line-height-100%">
                  {{ formatNumber(itemInfo.articleMetric.viewCount) }}
                </span>
              </div>

              <div
                class="touch-selected mr-10 flex items-center gap-2"
                :class="{ 'color-primary': itemInfo.isLike }"
                @click="like(itemInfo.id, $event)"
              >
                <i class="i-fe:thumbs-up" />
                <span class="line-height-100%">
                  {{ formatNumber(itemInfo.articleMetric.likeCount) }}
                </span>
              </div>
              <div
                v-if="showCommentCount"
                class="touch-selected flex items-center gap-2"
              >
                <i class="i-fe:message-square" />
                <span class="line-height-100%">
                  {{ formatNumber(itemInfo.articleMetric.commentCount) }}
                </span>
              </div>
            </div>
          </div>
          <div class="tag-box flex gap-5">
            <el-tooltip
              v-for="(tag, index) in itemInfo.tags"
              :key="index"
              placement="bottom"
              effect="light"
              :show-arrow="false"
              :show-after="500"
              :content="tag.name"
            >
              <el-tag
                type="info"
                size="small"
                class="touch-selected"
                @click="toTag(tag.id, $event)"
              >
                <span class="truncate-tag">{{ tag.name }}</span>
              </el-tag>
            </el-tooltip>
          </div>
        </div>
      </template>
    </div>
    <!-- 右侧图片区 -->
    <div v-if="itemInfo.cover" class="h-80 w-110 overflow-hidden border-rd-5">
      <el-image :src="itemInfo.cover" fit="cover" />
    </div>
  </div>
</template>

<style scoped>
/**
 * 图标触摸选中更改文字颜色
 */
.touch-selected:hover {
  cursor: pointer;
  color: var(--el-color-primary);
}
/**
 * 触摸选中内容区
 */
.touch-selected-content:hover {
  cursor: pointer;
  background-color: var(--el-color-primary-light-9);
  user-select: none;
}
/**
 * 隐藏tag
 */
@media (max-width: 600px) {
  .tag-box {
    display: none;
  }
}

.truncate-tag {
  display: inline-block; /* 或 inline-flex */
  max-width: 60px; /* 限制宽度（必填） */
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}
</style>
